<template>
  <!-- 优惠券列表 -->
  <div class="search">
    <div class="title search_top">
      <div class="ei">
        <el-icon>
          <Search />
        </el-icon>
        <h3>筛选搜索</h3>
      </div>
      <div>
        <el-button @click="resettingFn">重置</el-button>
        <el-button type="primary" @click="onSearch">查询搜索</el-button>
      </div>
    </div>
    <div class="search_input_yh">
      <div class="search_input_name">
        <p>优惠券名称:</p>
        <el-input
          type="text"
          placeholder="优惠券名称"
          v-model="name"
        ></el-input>
      </div>
      <div class="search_input_lx">
        <p>优惠券类型:</p>
        <el-select v-model="value" clearable placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </div>
  <div class="adddata">
    <div class="title">
      <el-icon>
        <Tickets />
      </el-icon>
      <h3>数据列表</h3>
    </div>

    <div>
      <el-button @click="addCoupon">添加</el-button>
    </div>
  </div>
  <div class="tables">
    <!-- 数据的展示 -->
    <el-table
      align="center"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :border="true"
    >
      <el-table-column type="selection" width="59" />
      <el-table-column align="center" prop="id" label="编号" width="177" />
      <el-table-column
        align="center"
        prop="name"
        label="优惠券名称"
        width="177"
      />
      <el-table-column align="center" label="优惠券类型" width="177">
        <template #default="scope">
          <div>
            {{ scope.row.type === 0 ? "全场赠券" : "" }}
            {{ scope.row.type === 1 ? "会员赠券" : "" }}
            {{ scope.row.type === 2 ? "购物赠券" : "" }}
            {{ scope.row.type === 3 ? "注册赠券" : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="可使用商品" width="177">
        <template #default="scope">
          <div>
            {{ scope.row.useType === 0 ? "全场通用" : "指定商品" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="使用门槛" width="177">
        <template #default="scope">
          <div>
            {{ `满${scope.row.minPoint}元可用` }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="面值" width="99">
        <template #default="scope">
          <div>
            {{ `${scope.row.amount}元` }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="适用平台" width="99">
        <template #default="scope">
          <div>
            {{ scope.row.type === 0 ? "全平台" : "" }}
            {{ scope.row.type === 2 ? "移动平台" : "" }}
            {{ scope.row.type === 3 ? "PC平台" : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="有效期" width="179">
        <template #default="scope">
          <div>
            {{
              scope.row.startTime
                ? dayjs(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}至
            {{
              scope.row.endTime
                ? dayjs(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="99">
        <template #default="scope">
          <div>已过期</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="179" flex="right">
        <template #default="scope">
          <span @click="lookOver(scope.row.id)">查看</span>
          <span class="bianji" @click="onEdit(scope.row)">编辑</span>
          <span @click="deleteCouponList(scope.row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :page-sizes="[1, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, unref } from "vue";
import type { Ref } from "vue";
import { ElTable } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
// 处理时间格式
import dayjs from "dayjs";
// 封装数据处理函数
import useTable from "../../hooks/useTables";
// 活动列表请求接口
import * as api from "../../request/api";
// 路由组件
import router from "../../router";
// 弹出框
import Edit from "./components/Edit.vue";
// 数据约束
import {
  deleteFlash,
  IFlashListItem,
  IUpdateStatus,
  ICouponListItem,
  ICouponListRefs,
} from "../../request/SmsAdminConreiller/index";
import { useRoute } from "vue-router";

// 输入框内容
const name = ref("");
// 下拉框内容
const value = ref<number | string>("");

const options = [
  {
    value: "0",
    label: "全场赠券",
  },
  {
    value: "1",
    label: "会员赠券",
  },
  {
    value: "2",
    label: "购物赠券",
  },
  {
    value: "3",
    label: "注册赠券",
  },
];

// 重置
let resettingFn = () => {
  name.value = "";
  value.value = "";
  getTableData();
};

// 添加优惠券
let addCoupon = () => {
  router.push("/sms/addCoupon");
};

// 点击 查看优惠券
let lookOver = (id: number) => {
  router.push({
    path: "/sms/couponHistory",
    query: {
      id: id,
    },
  });
};

// 删除按钮
let deleteCouponList = (id: number) => {
  // 二次 确认
  ElMessageBox.confirm("是否进行删除操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 发请求删除
      await api.flash.deleteCoupon(id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 编辑按钮
let onEdit = (row: any) => {
  // add = false;
  // modalForm.value = row
  console.log(row);

  router.push({
    path: "/sms/updateCoupon",
    query: {
      id: row.id,
    },
  });
  // console.log(modalForm.value);
};

//数据请求展示
let { tableData, getTableData, pagination } = useTable(
  api.flash.getCouponList,
  {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    name: name, // name 是响应式的
    type: value as any,
  }
);
getTableData();
console.log(tableData);

//分页
const handleSizeChange = (val: number) => {
  getTableData();
  //   console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  getTableData();
  //   console.log(`current page: ${val}`);
};
// 搜索
let onSearch = async () => {
  console.log(tableData);
  switch (value.value) {
    case "全场赠券":
      value.value = 0;
      break;
    case "会员赠券":
      value.value = 1;
      break;
    case "购物赠券":
      value.value = 2;
      break;
    case "注册赠券":
      value.value = 3;
      break;
    default:
      break;
  }
  
  //   value.value =
  getTableData();
};

// 全选
interface User {
  date: string;
  name: string;
  address: string;
}

// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  flex-wrap: wrap;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

  .search_top {
    width: 100%;
  }

  .search_input_name {
    width: 300px;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .search_input_lx {
    width: 300px;
    display: flex;
    align-items: center;
  }

  .search_input_yh {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    padding-top: 20px;

    .search_input {
      display: flex;
      align-items: center;
      width: 100%;
      // padding: 0 20px;
      // padding-top: 20px;
    }

    .el-input {
      width: 200px;
      height: 32px;
      font-size: 14px;
      padding: 0 10px;
    }

    p {
      width: 87px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #606266;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
  }
}

.adddata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .ei {
    display: flex;
    align-items: center;

    h3 {
      color: #303133;
      font-size: 14px;
      margin-left: 10px;
    }
  }

  h3 {
    color: #303133;
    font-size: 14px;
    margin-left: 10px;
  }
}

.tables {
  .pagination {
    margin: 20px 0;
    padding-right: 20px;
    float: right;
  }

  span {
    color: #409eff;
    cursor: pointer;
  }

  .bianji {
    margin: 0 5px;
  }

  .users {
    color: #409eff;
    font-size: 12px;

    &:hover {
      color: rgba(64, 158, 255, 0.7);
      cursor: pointer;
    }
  }
}
</style>
